<template>
	<view class="path-container" style="background-color: #fff;height: 100%;">
		<fui-nav-bar title="注册流程" isFixed isOccupy></fui-nav-bar>
		<view class="u-p-l-35 u-p-r-35">
			<view class="register-process u-p-30 u-m-b-20">
				<view class="process-container u-p-l-40 u-p-r-40 u-flex u-row-between">
					<view class="process-mark  u-flex u-row-center u-col-center">
						<fui-icon name="check" :size="30"></fui-icon>
					</view>
					<view class="process-line"></view>
					<view class="process-mark u-flex u-row-center u-col-center">
						<fui-icon name="check" :size="30" v-if="isAuthRealName"></fui-icon>
						<text v-else>1</text>
					</view>
					<view :class="['process-line',{'mark-grey':!isAuthRealName}]"></view>
					<view :class="['process-mark', 'u-flex', 'u-row-center', 'u-col-center', {'mark-grey':!isAuthRealName}]">
						<text>2</text>
					</view>
				</view>
				<view class="process-text u-flex u-row-between u-m-t-20">
					<text style="color: #333;" class="u-font-28">账号注册</text>
					<text style="color: #333;" class="u-font-28">实名认证</text>
					<text style="color: #333;" class="u-font-28">企业注册</text>
				</view>
			</view>
			<IdentifyAuth :registerType="0" v-if="!isAuthRealName" ref="authUserName" />
			<Identify-Auth :registerType="1" v-if="isAuthRealName&&!isHaveShop" ref="authShop"></Identify-Auth>
		</view>
		<view class="position-bot">
			<sn-button text="提交实名审核" v-if="!isAuthRealName"  @click="commitModalShow" isDempShow @dempFn="userDempFn()"/>
			<sn-button text="立即注册"  v-if="isAuthRealName&&!isHaveShop" @click="registerShopFn" isDempShow @dempFn="modalShow= true"/>
		</view>
		<!-- 个人信息承偌书弹窗 -->
		<fui-modal :show="commitShow" :buttons="[]"  class="commit-show" length="80%">
			<view class="commit-container u-p-30" >
				<view class="u-text-center u-font-36 u-m-b-30" style="font-weight: 500;">个人信息承诺书</view>
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view class="commit-content u-font-28" >
						为响应国家号召，贯彻落实实名制，在此承诺遵守《关于加强网络信息保护的决定》、《电信和互联网用户个人信息保护规定》、《电话用户真实身份信息登记规定》等国家相关法律规定
						我承诺做到但不限于以下措施，以保障能够用完成在我方责任范围内的实名制责任与以上承诺。
						<br />
						1、用户应自行诚信向本平台提供注册资料，用户保证其提供的注册资料真实、准确、完整、合法有效，用户注册资料如有变动的，应及时更新其注册资料。如果用户提供的注册资料不合法、不真实、不准确、不详尽的，用户需承担因此引起的相应责任及后果。
						<br />2、用户在本平台进行浏览、下单购物等活动时，涉及用户真实姓名/名称、通信地址、联系电话、电子邮箱等隐私信息的，本平台将予以严格保密，除非得到用户的授权或法律另有规定，本平台不会向外界披露用户隐私信息。
						<br />3、用户注册成功后，可以根据本平台规定改变密码。用户应谨慎合理的保存、使用其用户名和密码，不得提供给其他任何人。用户若发现任何非法使用用户账号或存在安全漏洞的情况，请立即通知本平台并向公安机关报案。
						<br />4、用户不得将在本平台注册获得的账户借给他人使用，否则用户应承担由此产生的全部责任，并与实际使用人承担连带责任。
					</view>
				</scroll-view>
				<view class="commit-footer">
					<view class="u-flex">
						<fui-checkbox :checked="isAgree" color="#ffbb1a" scaleRatio=".7" @change="isAgreeChange"></fui-checkbox>
						<text  @click="isAgree = !isAgree" class="u-font-26" style="color: #999;">我已阅读并同意【个人信息承诺书】内容</text>
					</view>
					<view class="u-flex u-row-between u-m-t-30">
						<view class="commit-btn" @click="closeCommit()">取消</view>
						<view :class="['commit-btn',{'timer-out':readTime !==''}]" @click="handleSubmit()">确认{{readTime}}</view>
					</view>
				</view>
			</view>
		</fui-modal>
		<!-- 跳过注册流程弹窗 -->
		<fui-modal :show="modalShow" :title="modalTitle" maskClosable @cancel="modalShow = false;"  @click="confirmDempFn">
			<view class="u-p-30 u-font-28 u-text-center">
				<rich-text :nodes="modalContent"></rich-text>
			</view>
		</fui-modal>
		<fui-modal :show="backHomeShow" :buttons="['返回首页']" title="提示" @click="relaunchHome" 
		:descr="'已提交人工审核，等待审核通过可继续注册企业~'" ></fui-modal>
	</view>

</template>

<script setup>
	import { computed,ref } from 'vue';
	import IdentifyAuth from '@/components/Identify-Auth.vue';
	import SnButton from '@/components/sn-button.vue';
	import {useUserStore} from '@/store/user.js';
	import {useShopStore} from '@/store/shop.js';
	import newHttp from '@/utils/request/newRequest.js';
	const userStore = useUserStore();
	const shopStore = useShopStore();
	const isAuthRealName = computed(()=>userStore.isAuthRealName);
	const authUserName = ref(null) //个人认证模块 DOM
	const authShop = ref(null) //个人认证模块 DOM
	const commitShow = ref(false); //个人承诺书开关
	const isHaveShop = ref(false); //个人承诺书开关
	const modalShow = ref(false);  //跳过注册弹窗开关
	const backHomeShow = ref(false); //返回首页弹窗开关
	const modalTitle = ref('您确定跳过注册门店?');
	const modalContent = ref(`
					注册企业后您可以以批发价进货哦~<br>
					您也可以点击“我”-->“企业注册”中继续注册
				`);
	// 打开跳过实名认证弹窗
	function userDempFn(){
		modalTitle.value = '您确定跳过实名认证？';
		modalContent.value = `跳过实名认证后有些功能将不可使用<br>如您跳过，你还可以点击“我”-->“实名认证”中继续完成认证`;
		modalShow.value = true;
	};
	// 跳过注册流程弹窗确认按钮
	function confirmDempFn(val){
		console.log(val);
		if(val.index === 0){
			modalShow.value = false;
		}else{
			relaunchHome();
		}
	};
	// 跳过注册流程弹窗确认按钮
	function relaunchHome(){
		uni.reLaunch({
			url:'/pages/index/index'
		})
	};
	const readTime = ref('');
	const isAgree = ref(false);
	let timer = null;
	function isAgreeChange(val){
		console.log(val);
		isAgree.value = val.checked;
	}
	// 显示个人信息承诺书弹窗
	async function commitModalShow(){
		const result = await authUserName.value.userValidator();
		if(result){
			let count = 5;
			if(timer){
				clearInterval(timer);
				timer = null;
			}
			timer = setInterval(function(){
				if(count<=1){
					clearInterval(timer);
					timer = null;
					readTime.value = '';
					return false;
				}
				count--;
				readTime.value = '('+count+'s)';
			},1000);
			readTime.value = '('+count+'s)';
			commitShow.value = true;
		}
	};
	// 关闭个人信息承偌书弹窗
	function closeCommit(){
		clearInterval(timer);
		timer = null;
		isAgree.value = false;
		readTime.value = '';
		commitShow.value = false;
	};
	// 同意个人承偌书后，提交实名认证！
	async function handleSubmit(){
		if(timer){
			return false;
		}
		if(!isAgree.value){
			return uni.$fui.toast('请阅读并同意个人信息承诺书')
		};
		commitShow.value = false;
		uni.showLoading({
			title:'loading...'
		});
		// 提交实名认证
		const res = await newHttp.post('api/User/RealNameAuthentication', authUserName.value.userFrom);
		uni.hideLoading();
		if(res.code === 200){
			if(authUserName.value.userFrom.IdType === 1){
				let  info = uni.getStorageSync('user');
				info.realPeopleConfirmed = true;
				uni.setStorageSync('user', info);
				console.log(isAuthRealName);
				// state.user.realPeopleConfirmed = status;
				uni.$fui.toast('实名认证成功');
				uni.showLoading({
					title:'加载用户信息...'
				});
				// 获取该用户得店铺
				const result = await $newHttp.get('api/User/GetShopsByUser' );
				uni.hideLoading()
				if(result.code === 200){
					if (result.data.length!==0) {
						isHaveShop.value = true;
						shopStore.login(result.data)
						relaunchHome();
					}else{
						isHaveShop.value= false;
					}
				}else{
					uni.$fui.toast('获取店铺列表信息失败，请再首页下拉刷新重新加载店铺列表')
					relaunchHome();
				}
			}else{
				backHomeShow.value = true;
			}
		}else if(res.code === 30904){
			uni.$fui.toast('自动认证失败，已转为人工审核，请耐心等候~');
			relaunchHome();
		}else{
			uni.$fui.toast('实名认证失败，错误信息：'+res.erroMessage)
		}
		
	};
	async function registerShopFn(){
		const result = await authShop.value.shopValidator(); 
		if(result){
			uni.showLoading({
				title:'loading...'
			});
			const res = await newHttp.post('api/Shop/Signup', authShop.value.businessForm);
			uni.hideLoading();
			if(res.code === 200){
				uni.$fui.toast('注册成功','success');
				relaunchHome()
			}else if(res.code === 30904){
					uni.$fui.toast('企业自动校验失败，已转为人工审核，请耐心等候审核结果~');
				relaunchHome();
			}else{
				uni.$fui.toast('注册失败，错误信息：'+res.erroMessage)
			}
		}
	};
</script>


<style lang="scss" scoped>
	.path-container{
		.register-process{
			background: #F6F6F6;
			border-radius: 10rpx;
			.process-container{
				.process-mark{
					width: 36rpx;
					height: 36rpx;
					background: #FFBB1A;
					border-radius: 50%;
				}
				.process-line{
					width: 126rpx;
					height: 4rpx;
					border-radius: 2rpx;
					background-color: #FFBB1A;
				}
				.mark-grey{
					background-color: #D5D5D5 !important;
				}
			}
		}
		.commit-show{
			.commit-btn{
				width: 46%;
				box-sizing: border-box;
				padding: 20rpx 0;
				border-radius:70rpx;
				text-align: center;
				font-size: 30rpx;
			}
			.commit-btn:nth-of-type(1){
				border: 1px solid #333;
			}
			.commit-btn:nth-of-type(2){
				background: #FFBB1A;
			}
			.timer-out{
				background:#ccc !important;
			}
		}
	}
</style>